<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- el-tabs 是标签页组件； el-tab-pane是每个标签页项 -->
      <el-tabs>
        <el-tab-pane label="角色管理">
          <!-- !筛选表单区域 -->
          <!-- !操作区 -->
          <el-row type="flex" justify="space-between">
            <!-- 左边区域 -->
            <div>
              <el-button icon="el-icon-plus" size="small" type="warning"
                >批量导出</el-button
              >
              <el-button icon="el-icon-plus" size="small" type="danger"
                >批量删除</el-button
              >
            </div>
            <!-- 右边区域 -->
            <div>
              <el-button
                icon="el-icon-plus"
                size="small"
                @click="dialogShow = true"
                type="primary"
                >新增</el-button
              >
            </div>
          </el-row>
          <br />
          <!-- !表格区域 -->
          <!-- 【列表功能】 4. 渲染数据 -->
          <el-table :data="list" border>
            <el-table-column
              width="100px"
              type="index"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="角色管理"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="description"
              label="角色描述"
              align="center"
            ></el-table-column>
            <el-table-column width="360px" label="操作">
              <!-- row 就是这一行的数据 -->
              <template slot-scope="{ row }">
                <el-button
                  size="small"
                  icon="el-icon-setting"
                  type="success"
                  @click="openSetAuth(row.id)"
                  >分配权限</el-button
                >
                <el-button
                  size="small"
                  icon="el-icon-edit"
                  type="primary"
                  @click="editRow(row.id)"
                  >编辑</el-button
                >
                <el-button
                  size="small"
                  @click="delRow(row.id)"
                  icon="el-icon-delete"
                  type="danger"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- !分页区域 -->
          <!-- size-chang 每页个数调整时间 -->
          <!-- current-change 页面更换事件 -->
          <!-- current-page 当前页码 -->
          <!-- page-sizes 每页有多少个，建一个数组的第一个元素要和当前每页个数保持一致 -->
          <!-- page-size 每页个数 -->
          <!-- layout 布局， 总数、每页个数下拉框、左按钮、页码、右按钮、页码跳转 -->
          <!-- 注意：layout不能写错，不能多了逗号否则出不来分页器 -->
          <!-- total 总数 -->
          <!-- background背景色 -->
          <!-- 总结：
                3个变量： 每页数量、页码数、总数
                2个事件： 页码切换时间、每页数量变化时间
          -->
          <el-pagination
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page.sync="queryData.page"
            :page-sizes="[5, 6, 7, 8]"
            :page-size="queryData.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalNum"
            background
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="公司信息">
          <el-alert
            title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
            type="info"
            show-icon
          />
          <br />
          <el-form label-width="80px">
            <el-form-item label="公司名称">
              <el-input
                v-model="formData.name"
                disabled
                style="width: 400px"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input
                v-model="formData.companyAddress"
                disabled
                style="width: 400px"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司邮箱">
              <el-input
                v-model="formData.mailbox"
                disabled
                style="width: 400px"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                v-model="formData.remarks"
                disabled
                style="width: 400px"
                type="textarea"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- ! 绘制弹框组件 -->
    <el-dialog
      :title="formRole.id ? '修改' : '新增'"
      :visible.sync="dialogShow"
      width="45%"
      @close="closeDialog"
    >
      <!-- ? 绘制表单 -->
      <el-form
        :model="formRole"
        ref="formRef"
        :rules="formRules"
        label-width="140px"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="formRole.name"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input
            type="textarea"
            :rows="3"
            v-model="formRole.description"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="small" @click="dialogShow = false">取消</el-button>
        <el-button size="small" type="primary" @click="btnOk">确定</el-button>
      </span>
    </el-dialog>
    <!-- ! 角色关联权限 -->
    <setAuth ref="setAuth" />
  </div>
</template>
<script>
import {
  getRoleListApi,
  getCompanyInfo,
  addRoleApi,
  getRoleInfoApi,
  editRoleApi,
  delRoleApi,
} from "@/api/setting";
import setAuth from "./components/setAuth.vue";
import list from "@/mixins/list";
export default {
  mixins: [list],
  name: "Setting",
  components: {
    setAuth,
  },
  data() {
    return {
      // list: [], // 【列表功能】 1.定义变量
      // 【列表功能】 查询参数,列表接口需要的参数
      queryData: {
        // page: 1,
        pagesize: 5,
      },
      totalNum: 0, // 【列表功能】 总数变量
      formData: {},
      dialogShow: false, // 【新增修改功能】 弹框控制变量
      // 【新增修改功能】表单数据变量
      formRole: {
        name: "",
        description: "",
      },
      // 【新增修改功能】表单验证规则对象
      formRules: {
        name: [{ required: true, message: "请输入角色名称", trgger: "blur" }],
        description: [
          { required: true, message: "请输入角色描述", trgger: "blur" },
        ],
      },
    };
  },
  created() {
    // 【列表功能】3.调用请求方法
    // this.initData();
    console.log("设置的created");
  },
  methods: {
    // 【列表功能】2.定义方法
    async initData() {
      // 2.1 导入请求方法，发起请求
      let { rows, total } = await getRoleListApi(this.queryData); // 检查network
      // 2.2 成功处理，加工数据、赋值数据
      this.list = rows; // 检查vue调试器
      this.totalNum = total;
      // ===========================
      // 获取公司信息的请求
      this.formData = await getCompanyInfo(this.$store.getters.companyId);
    },
    // 【列表功能】 每页数量更换事件
    sizeChange(val) {
      console.log(val); // 最新每页数量
      this.queryData.pagesize = val;
      this.initData();
    },
    // 【列表功能】 页码切换时间
    // currentChange(val) {
    //   console.log(val); // 最新页码
    //   this.queryData.page = val;
    //   this.initData();
    // },
    // 【新增修改功能】提交时间
    async btnOk() {
      // 1. 校验表单
      try {
        await this.$refs.formRef.validate();
      } catch (error) {
        return console.log(error);
      }
      // 2. 加工表单数据、发生请求
      // 3. 提示成功
      if (this.formRole.id) {
        await editRoleApi(this.formRole);
        this.$message.success("修改成功");
      } else {
        await addRoleApi(this.formRole);
        this.$message.success("添加成功");
      }
      // 4. 列表更新
      this.initData();
      // 5. 弹框关闭、表单重置
      this.dialogShow = false;
    },
    // 【新增修改功能】弹框关闭
    closeDialog() {
      this.$refs.formRef.resetFields();
      this.formRole = {
        name: "",
        description: "",
      };
    },
    // 【修改功能】编辑点击，弹框打开，数据回显
    async editRow(id) {
      // 1. 获取单行的数据
      let res = await getRoleInfoApi(id);
      // 2. 赋值给表单
      this.formRole = res;
      // 3. 弹框打开
      this.dialogShow = true;
    },
    // 【删除功能】确认框、发请求、列表更新
    async delRow(id) {
      // 1. 确认弹框弹出
      try {
        await this.$confirm("确认删除吗？");
      } catch (error) {
        return console.log(error);
      }
      // 2. 发生删除请求
      await delRoleApi(id);
      // 3. 提示成功
      this.$message.success("删除成功");
      // 边缘处理：如果这一页只有一个数据(不是第一页)，且被删除成功，则页码要-1，再请求列表
      if (this.queryData.page !== 1 && this.list.length === 1) {
        this.queryData.page--;
      }
      // 4. 列表更新
      this.initData();
    },
    // 打开设置权限弹框
    async openSetAuth(id) {
      let res = await getRoleInfoApi(id);
      this.$refs.setAuth.permIds = res.permIds;
      this.$refs.setAuth.roleId = id;
      this.$refs.setAuth.showDialog = true;
      this.$refs.setAuth.getPermissionList();
    },
  },
};
</script>
<style lang="scss" scoped></style>
